<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			html body{
				height: 100%;
				width: 100%;
			}
			#box{
				background-color: yellow;
				height: 200px;
				width: 100px;
				position: fixed;
				left: 0;
				top:200px
				
			}
			#box li{
				text-align: center;
				line-height: 40px;
				border: #CCCCCC 1px solid;
				background-color: #FF4500;
				cursor: pointer;
			}
			#box li.current{
				background-color: #A9A9A9;
			}
			#screen{
				width: 100%;
			}
			#screen li{
				width: 100%;
				height: 650px;
				text-align: center;
				font-size: 45px;
				border-bottom: #A9A9A9 4px solid;
				background-color: #00BFFF;
			}
		</style>
	</head>
	<body>
		<ol id="box">
			<li>第1层</li>
			<li>第2层</li>
			<li>第3层</li>
			<li>第4层</li>
			<li>第5层</li>
		</ol>
		<ul id="screen">
			<li>第1层内容</li>
			<li>第2层内容</li>
			<li>第3层内容</li>
			<li>第4层内容</li>
			<li>第5层内容</li>
		</ul>
		<script src="通用兼容文件.js"></script>
		<script>
			window.onload = function(){
				var dclick = false;
			var box =$('box'),screen = $("screen");
				var olis = box.children;
				var ulis=screen.children;
				//上色区分
				var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
				for(var i=0; i<colorArr.length; i++){
				    ulis[i].style.backgroundColor = colorArr[i];
				}
				
			
				//相应的点击点
				for(var i=0;i<olis.length;i++){
					//一个闭包
					(function(index){
					var oli =olis[index];
					oli.onmousedown = function(){
						
						dclick = true;
						for(var j=0; j<olis.length;j++){
							olis[j].className = '';
						} this.className = 'current';
						 
					buffer(document.documentElement, {scrollTop:index* 650},function(){
						dclick = false;
					});
					}	
					})(i);
				}
				
			//监听滚动
			window.onscroll = function(){
				if(!dclick){
					
				var roll = Math.ceil(scroll().top);
				
					for(var i=0; i<olis.length;i++){
						
						if(roll>=ulis[i].offsetTop){
							
							for(var j=0;j<olis.length;j++){
								
								olis[j].className = '';
							} olis[i+1].className = 'current';
							
						}
					}
					
				}
		
			}
			
	
		
				
			}
		</script>
	</body>
</html>
